<template>
	<view class="container pageBg3">
		<view class="statusBar" :style="{height:statusBarHeight() + 'px'}"></view>
		<view :style="{height:TitleBarHeight() + 'px'}">

		</view>
		<view class="title">
			<view class="info">
			<image :src="userInfo.avatar"></image>
				<text class="nickname">{{userInfo.name}}</text>
				<!-- <text v-show="!gender==''"  :class="[gender==1?'icon-nv':'icon-nv1']"></text> -->
			</view>
			<view @click="cli" class="icon">
				<image src="../../static/images/assistant-small.png" mode=""></image>
			</view>
		</view>


		<view class="item_list">
			<view class="item" @click="toPersonalInfo">
				<view class="wrap">
					<text class="icon-shezhi"></text>
					<text>个人信息</text>
				</view>
				<text class="icon-arrow-down"></text>
			</view>
			


			<view class="item" @click="clickContact">
				<view class="wrap">
					<text class="icon-shezhi"></text>
					<text>联系客服</text>
				</view>
				<text class="icon-arrow-down"></text>
			</view>

			<view class="item" @click="toSettings">
				<view class="wrap">
					<text class="icon-shezhi"></text>
					<text>设置</text>
				</view>
				<text class="icon-arrow-down"></text>
			</view>
		</view>
		<view class="">
			<tabbar :selectedIndex = "1"></tabbar>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		statusBarHeight,
		TitleBarHeight,
		navBarHeight
	} from '../../utils/system.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const userInfo = ref({})
	const getUserInfo = () => {
		userInfo.value = uni.getStorageSync("userInfo");
		console.log(userInfo.value);
	}

	const cli = () => {
		uni.navigateTo({
			url: "/pages/assistant/assistant"
		})
	}

	// 获取用户信息
	onShow(() => {

		nextTick(() => {
			getUserInfo()
		})
	})

	const toMycourseList = () => {
		uni.navigateTo({
			url: '/pages/myCourse/myCourse'
		})
	}
	const clickContact = () => {
		uni.makePhoneCall({
			phoneNumber: "17735925225"
		})
	}
	const toPersonalInfo = () => {
		uni.navigateTo({
			url: '/pages/personalInfo/personalInfo'
		})
	}
	const toSettings = () => {
		uni.navigateTo({
			url: '/pages/settings/settings'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0rpx 20rpx;
		height: 100vh;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: white;
		padding: 30rpx;
	}

	.title image {
		height: 90rpx;
		width: 90rpx;
		border-radius: 45rpx;
		border: 4rpx solid #ffffff;
		margin-right: 20rpx;
	}
	.title .icon image{
		border: none;
		width: 55rpx;
		height: 55rpx;
	}
	.item_list {
		margin-top: 10rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		height: 89rpx;
		line-height: 89rpx;
		font-size: 30rpx;
		font-weight: 700;
		background-color: white;
		padding: 0rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.wrap {
		display: flex;
	}

	.wrap text:nth-of-type(1) {
		font-size: 40rpx;
		margin-right: 20rpx;
	}

	.nickname {
		margin-right: 19rpx;
	}

	.info {
		display: flex;
		align-items: center;
		line-height: 46rpx;
		font-size: 30rpx;
	}

	// .icon {
	// 	margin-left: auto;
	// 	width: 150rpx;
	// 	height: 60rpx;
	// 	text-align: center;
	// 	line-height: 60rpx;
	// 	color: #ffffff;
	// 	// border: 1px solid #ffffff;
	// 	background-color: rgba(22, 93, 255, 1);
	// 	font-size: 26rpx;
	// 	border-radius: 50rpx;
	// }
</style>